<template>
  <div id="app">
    <a href="https://froala.com/wysiwyg-editor"
      ><h1>Froala-WYSIWYG-Editor 编辑器</h1></a
    >

    <div class="sample">
      <h2>原生</h2>
      <froala v-model="content"></froala>
      <h4>显示内容:</h4>
      <froalaView v-model="content"></froalaView>
    </div>

    <div class="sample">
      <h2>暗黑主题</h2>
      <froala :config="config" v-model="content2"></froala>
      <h4>显示内容:</h4>
      <froalaView v-model="content2"></froalaView>
    </div>
  </div>
</template>

<script>
import VueFroala from "vue-froala-wysiwyg";

export default {
  name: "app",
  data() {
    return {
      //  More -> https://www.froala.com/wysiwyg-editor/docs/options
      config: {
        placeholderText: "在这里编辑您的内容！",
        heightMin: 100,
        heightMax: 200,
        charCounterCount: true, //计数字符
        toolbarButtons: [
          "undo",
          "redo",
          "clearFormatting",
          "|",
          "bold",
          "italic",
          "underline",
          "strikeThrough",
          "|",
          "fontFamily",
          "fontSize",
          "color",
          "|",
          "paragraphFormat",
          "align",
          "formatOL",
          "formatUL",
          "outdent",
          "indent",
          "quote",
          "-",
          "insertLink",
          "insertImage",
          "insertVideo",
          "embedly",
          "insertFile",
          "insertTable",
          "|",
          "emoticons",
          "specialCharacters",
          "insertHR",
          "selectAll",
          "|",
          "print",
          "spellChecker",
          "help",
          "|",
          "fullscreen"
        ], //['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo'],//显示可操作项
        theme: "dark", //主题
        language: "zh_cn", //国际化
        imageUploadURL: "http://i.froala.com/upload", //上传url
        fileUploadURL: "http://i.froala.com/upload", //上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options
        quickInsertButtons: ["image", "table", "ul", "ol", "hr"], //快速插入项
        // toolbarVisibleWithoutSelection: true,//是否开启 不选中模式
        // disableRightClick: true,//是否屏蔽右击
        colorsHEXInput: false, //关闭16进制色值
        toolbarSticky: true, //操作栏是否自动吸顶
        zIndex: 99999,
        events: {
          "froalaEditor.initialized": function() {
            console.log("initialized");
          }
        }
      },
      content: "", //默认测试文本
      content2: ""
    };
  }
};
</script>

<style scoped>
.sample {
  padding-bottom: 50px;
  margin-left: 30px;
  border-top: 1px solid lightgray;
}
</style>
